<!DOCTYPE html>
<html>
<head>
    <title>首页——打卡签到</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="__FRONT__/dist/lib/weui.min.css">
    <link rel="stylesheet" type="text/css" href="__FRONT__/dist/css/jquery-weui.min.css">
    <link rel="stylesheet" type="text/css" href="__FRONT__/dist/demos/css/demos.css">
    <link rel="stylesheet" type="text/css" href="__FRONT__/css/jquery.circliful.css">
    <link rel="stylesheet" type="text/css" href="__FRONT__/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="__FRONT__/css/default.css">
    <!--<link href="__FRONT__/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="__FRONT__/css/common.min.css" rel="stylesheet">
    <script src="__FRONT__/js/jquery-1.11.1.min.js"></script>
    <script src="__FRONT__/js/jquery.circliful.min.js"></script>
    <script type="text/javascript" src="__FRONT__/js/common.js"></script>
    <script src="__FRONT__/js/jquery.AshAlom.gaugeMeter-2.0.0.min.js"></script>

    <style type="text/css">
        .mui-toast-container {
            position: fixed;
            z-index: 9999;
            width: 120px;
            min-height: 120px;
            top: 180px;
            left: 50%;
            margin-left: -3.8em;
            background: rgba(40, 40, 40, .75);
            text-align: center;
            border-radius: 5px;
            color: #fff;
            opacity: 0;
            -webkit-transition: opacity .8s;
            transition: opacity .8s
        }

        .mui-toast-container.mui-active {
            opacity: 1
        }

        .mui-toast-container .mui-toast-icon {
            margin-top: 20px;
            height: 55px;
            line-height: 55px;
            color: #fff;
            font-size: 40px;
            text-align: center;
            margin-bottom: 4px
        }

        a {
            color: white;
        }

        #header {
            background: url('__FRONT__/img/bg.png') no-repeat;
            width: 100%;
            height: 414px;
            background-size: 100% 96%;
        }

        .head {
            margin: 0 auto;
            width: 100%;
            /*padding: 5% 0 0 0;*/
            text-align: center;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .head img {
            width: 15.5%;
            border-radius: 50%;
            margin-left: -3%;
        }

        .first {
            display: flex;
            justify-content: space-between;
            color: white;
        }

        .first div {
            margin-top: 12px;
        }

        .first .head{
            margin-top: 0;
        }

        .switchs img {
            width: 40px;
            height: 40px;
            margin-left: 10px;
        }

        .second p {
            font-size: 12px;
            text-align: center;
        }

        .second h1 {
            text-align: center;
        }

        .second div p {
            background-color: #697dff;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            display: inline-block;
        }

        .rightIcon {
            background-color: #00beff;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            text-align: center;
            margin: 5px;
            position: relative;
        }

        .rightIcon img {
            width: 30px;
            height: 30px;
            display: inline-block;
        }

        .rightIcon p {
            width: 120%;
            font-size:10px;
            -webkit-transform:scale(0.75);
            /*font-size: 7px;*/
            color: white;
            position: absolute;
            top: 23px;
            left: -10px;
            margin-left: 6px;
        }

        .center h3 {
            text-align: center;
            color: #4ad1ff;
        }

        .card {
            display: flex;
            justify-content: space-between;
            height: 150px;
        }

        .real {
            color: #0990be;
            width: 300px;
            height: 142px;
            padding-left: 130px;
            padding-top: 0px;
            overflow: hidden;
        }

        .real p {
            font-size: 14px;
        }

        .ren {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            display: block;
        }

        .star {
            width: 80px;
            height: 20px;
        }

        .character {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
        }

        .character .ren {
            margin-left: 16px;
        }

        .time {
            margin: 20px 0;
        }

        .firstTime {
            background-color: #00a3da;
            width: 90%;
            height: 50px;
            margin: 10px 5%;
            line-height: 50px;
            text-align: center;
            color: white;
            border-radius: 10px;
            vertical-align: middle
        }

        .secondTime {
            background-color: #4ad1ff;
            width: 90%;
            height: 50px;
            margin: 10px 5%;
            line-height: 50px;
            text-align: center;
            color: white;
            border-radius: 10px;
            vertical-align: middle
        }

        .footer {
            margin-top: 30px;
            border-top: 1px solid #bababa;
            width: 100%;
            overflow: hidden;
        }

        .footer a {
            display: block;
            width: 33%;
            height: 1.1rem;
            color: white;
            float: left;
            padding-top: .1rem;
            font-size: .22rem;
            text-align: center;
        }

        .footer a img {
            display: block;
            width: 40%;
            margin: 0 auto .05rem;
        }

        .fade {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;
            display: none;
        }

        .succ-pop {
            width: 85%;
            height: auto;
            background-color: #fff;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            border-radius: 5px;
            display: none;
        }

        .succ-pop h3.title {
            text-align: center;
            font-size: 17px;
            color: #797979;
            border-bottom: 1px solid #cdcdcd;
            height: 42px;
            line-height: 42px;
            font-weight: normal;
        }

        .rules p {
            width: 90%;
            margin: 20px 5%;
        }
        #challenge{
            color: white;
        }
        .real h2{
            font-size: 20px;
        }
        .second p{
            color: white;
        }
        .character p{
            text-align: center;
        }
    </style>
</head>
<body>
<div id="content" style="padding-bottom: 87px">
    <div id="header">
        <div class="first">
            <div class="switchs">
                <img src="__FRONT__/img/switch.png">
            </div>
            <div class="second">
                <p>当前实时挑战金额(元)</p>
                <h1>{$sysConfig['cur_money']}</h1>
                <p>当前有{$sysConfig['cur_per']}人参与打卡挑战</p>
                <p style="margin-top: 6px;"><a href="{:url('Index/poster')}">我的海报&nbsp></a></p>
                <div class="head">
                    <div style="padding-left: 3%;">
                        {foreach $list as $k=>$v}
                            {if($v['portrait'])}
                            <img src="{$v['portrait']}">
                            {else/}
                            <img src="{:config('headsrc')}">
                            {/if}
                        {/foreach}
                    </div>
                </div>
                <div class="head" style="margin-top:0px;">

                </div>
                <p id="challenge">挑战规则 ></p>
            </div>

            <div>
                <div class="rightIcon">
                    <img src="__FRONT__/img/we.png">
                    <p>联系客服</p>
                </div>

                <div class="rightIcon">
                    <img src="__FRONT__/img/jia.png">
                    <p>招商加盟</p>
                </div>

                <div class="rightIcon">
                    <img src="__FRONT__/img/wen.png">
                    <p>常见问题</p>
                </div>
            </div>
        </div>
    </div>

    <div class="center">
        <h3>今日打卡状况</h3>

        <div class="card">
            <div>
                <div style="position: absolute; top: 196px;left: 0px;width: 180px;height: 0px;" class="GaugeMeter"
                     id="GaugeMeter_91" data-percent="{$sysConfig['signed_count']}" data-append="%" notsign_count="111"
                     data-size="180" data-theme="black"
                     data-width="7" data-animate_gauge_colors="1" data-animate_text_colors="1" data-label=""
                     data-style="Arch" data-label_color="#FF0000"></div>
                </div>

            <div class="real">
                <h2>实时动态</h2>
                <div style="overflow: hidden;">
                    <ul style="list-style:none;">

                    </ul>
                </div>
            </div>
        </div>

    </div>

    <div align="center">
        <a href="{:url('Index/details')}" style="color:#6eb3c9;">
            <打卡详情>
        </a>
    </div>

    <div class="character">
        <div>
            <img src="{$zaoqi['portrait']?$zaoqi['portrait']:config('headsrc')}" class="ren">
            <img src="__FRONT__/img/star.png" class="star black_star">
            <p style="margin-left: -4px;" class="change_color">{:sign_time($zaoqi['create_time'])} 打卡</p>
        </div>

        <div>
            <img src="{$lianxu['portrait']?$lianxu['portrait']:config('headsrc')}" class="ren">
            <img src="__FRONT__/img/yl.png" class="star black_yl">
            <p style=" " class="change_color">连续{$lianxu['signed_count']}次</p>
        </div>
    </div>
   <!-- <p>开始时间：{$beginshow|date="Y-m-d H:i:s",###}<br>结束时间：{$endshow|date="Y-m-d H:i:s",###}</p>-->
    <div class="time">
        {if condition="$isExist" }{/*判断是否存在项目*/}
        {if condition="$beginshow lt time() && $endshow gt time()"}{/*判断是否在指定时间内*/}
        <div class="secondTime signIn">
            打卡签到
        </div>
        {else/}
        <div class="firstTime" id="times_s">
            打卡倒计时00时00分00秒
        </div>
        <div class="secondTime add_to_money">
            （已投入￥{$projectPrice})追加投入
        </div>
        {/if}
        {else/}
        <div class="secondTime join_active">
            同意规则并参加挑战
        </div>
        {/if}
    </div>
</div>
<div class="weui-tabbar">
    <a href="javascript:;" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img class="black_house" src="__FRONT__/img/home.png" alt="">
        </div>
        <p class="weui-tabbar__label change_color" style="">参与挑战</p>
    </a>

    <a href="{:url('Index/rili')}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="__FRONT__/img/rilinight.png" alt="">
        </div>
        <p class="weui-tabbar__label">日历</p>
    </a>

    <a href="{:url('Index/center')}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="__FRONT__/img/ren.png" alt="">
        </div>
        <p class="weui-tabbar__label">个人中心</p>
    </a>

    <a href="{:url('Index/read')}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="__FRONT__/img/eye.png" alt="">
        </div>
        <p class="weui-tabbar__label">参与必读</p>
    </a>
</div>
</div>

<!-- 挑战规则弹出框 -->
<div class="fade"></div>
<div class="succ-pop">
    <h3 class="title">
        挑战规则
    </h3>
    <div class="rules">
        <p>1.每日打卡时间为6:30:00-7:30:00</p>
        <p>2.打卡挑战者按1元一份额瓜分未打卡挑战者的挑战金注:所有准时打卡者平均分配;支付挑战金越高瓜分的奖励金也就越高;</p>
        <p>3.因未准时打卡，导致挑战金被瓜分的，再次参与挑战需重新支付挑战金；</p>
        <p>4.打卡遇到任何问题，请联系客服并提供截图。</p>
    </div>
</div>

<div class="">
    <div class=" weui-animate-fade-in" style="visibility: inherit;"></div>
    <div id="active_box" class="weui-actionsheet">
        <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell sel_prc" data-id="0">已阅读并同意挑战规则</div>
            <div class="weui-actionsheet__cell sel_prc" data-id="10">支付10元参与挑战</div>
            <div class="weui-actionsheet__cell sel_prc" data-id="50">支付50元参与挑战</div>
            <div class="weui-actionsheet__cell sel_prc" data-id="100">支付100元参与挑战</div>
            <div class="weui-actionsheet__cell sel_prc" data-id="500">支付500元参与挑战</div>
            <div class="weui-actionsheet__cell sel_prc" data-id="1000">支付1000元参与挑战</div>
            <div class="weui-actionsheet__cell sel_prc" data-id="2000">支付2000元参与挑战</div>
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell close_active_box">取消</div>
        </div>
    </div>
</div>

<div class="">
    <div class=" weui-animate-fade-in" style="visibility: inherit;"></div>
    <div id="add_to_money" class="weui-actionsheet">
        <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell add_money" data-id="0">已阅读并同意挑战规则</div>
            <div class="weui-actionsheet__cell add_money" data-id="10">支付10元参与挑战</div>
            <div class="weui-actionsheet__cell add_money" data-id="50">支付50元参与挑战</div>
            <div class="weui-actionsheet__cell add_money" data-id="100">支付100元参与挑战</div>
            <div class="weui-actionsheet__cell add_money" data-id="500">支付500元参与挑战</div>
            <div class="weui-actionsheet__cell add_money" data-id="1000">支付1000元参与挑战</div>
            <div class="weui-actionsheet__cell add_money" data-id="2000">支付2000元参与挑战</div>
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell close_active_box">取消</div>
        </div>
    </div>
</div>
<div class="msg-box"></div>
</body>
</html>
<script type="text/javascript">
    function autoScroll(obj) {
        $(obj).find("ul").animate({
            marginTop: "-20px",
        }, 400, function () {
         $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
        })
    }

    function getreal(){
        $.post('{:url("index/real")}',{},function (res) {
            if(res.code){
                var dongtai  = '';
                $.each(res.data,function (k,i) {
                    var phone = i.mobile;
                    var mphone = phone.substr(0, 3) + '****' + phone.substr(7);
                    dongtai += "<li>"+mphone+"参加:"+i.money+"</li>"
                });
                $('.real').find('ul').html(dongtai);
            }
        });
    }

    /*$(function () {
        setInterval('autoScroll(".real")',3000);
    })*/
    $(function () {
        getreal();
        setInterval(function () {
            autoScroll(".real");
        },3000);
        setInterval(function () {
            getreal();
        },15000)
    })
</script>
<script>
    //倒计时
    function countDown(times) {
        var timer = null;
        timer = setInterval(function () {
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0;//时间默认值
            if (times > 0) {
                hour = Math.floor(times / (60 * 60)) - (day * 24);
                minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (day <= 9) day = '0' + day;
            if (hour <= 9) hour = '0' + hour;
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;

            $('#times_s').html("打卡倒计时" + hour + "时" + minute + "分" + second + "秒");
            times--;
        }, 1000);
        if (times <= 0) {
            clearInterval(timer);
        }
    }

    $(document).ready(function () {
        countDown({$beleft_time});
        $('.join_active').click(function () {
            $('#active_box').addClass('weui-animate-slide-up');
            $('.weui-animate-fade-in').addClass('weui-mask');
            $('#active_box').removeClass('weui-animate-slide-down');
        });
        $('.add_to_money').click(function () {
            $('#add_to_money').addClass('weui-animate-slide-up');
            // $('.weui-animate-fade-in').addClass('weui-mask');
            $('#add_to_money').removeClass('weui-animate-slide-down');
        });
        $('.close_active_box').click(function () {
            $('#add_to_money').addClass('weui-animate-slide-down');
            $('#active_box').addClass('weui-animate-slide-down');
            $('.weui-animate-fade-in').removeClass('weui-mask');
            $('#active_box').removeClass('weui-animate-slide-up');
            $('#add_to_money').removeClass('weui-animate-slide-up');
        });
        $('.sel_prc').on('click', function () {
            var price = $(this).attr('data-id');
            $.post("{:url('Project/addProject')}", {'price': price}, function (res) {
                if (res.code == 1) {
                    showmsg(res.code, 1);
                }
                if (res.code == 0) {
                    showmsg(res.msg, 0, "{:url('index/index')}");
                }
            });
        });
        $('.add_money').on('click', function () {
            var price = $(this).attr('data-id');
            $.post("{:url('Project/add_to_money')}", {'price': price}, function (res) {
                if (res.code == 1) {
                    showmsg(res.msg, 1);
                }
                if (res.code == 0) {
                    showmsg(res.msg, 0, "{:url('index/index')}");
                }

            });
        });

        $('.signIn').click(function () {
            $.post("{:url('project/sign_in')}", {}, function (res) {
                if (res.code == 1) {
                    showmsg(res.msg, 1);
                }
                if (res.code == 0) {
                    showmsg(res.msg, 0, "{:url('index')}");
                }

            });
        });


        $(".GaugeMeter").gaugeMeter(
            {
                'notsign_count': "{$sysConfig['notsign_count']}"
            }
        );
        // 切换主题
        var time = new Date();
        var snowtime = time.toLocaleTimeString('chinese',{hour12:false});
        if(snowtime[0] == '0'){
           snowtime = snowtime.replace('0','');
        }
        var nowtime = snowtime.replace(/(\:)/g,'');
        if(parseInt(nowtime)>=170000 || parseInt(nowtime)<60000){
            night();
            localStorage.setItem('status',1);
        }else{
            day();
            localStorage.setItem('status',2);
        }
        /*if(localStorage.getItem('status')){
            if(localStorage.getItem('status')==1){
              night();
            }else{
                day();
            }
        }else{
            localStorage.setItem('status',2);
            day();
        }*/
/*
        var a = 1;
        $(".switchs").click(function () {
            if (a == 1){
                a = 0;
                day();
            }else if(a == 0){
                a = 1
                night()
            }
        });*/
        $(".switchs").click(function () {
            if (localStorage.getItem('status') == 1){
                localStorage.setItem('status',2);
                day();
            } else {
                localStorage.setItem('status',1);
                night();
            }
        });
        function night(){
            $("#header").css("background-image", "url(__BLACK__/black_bg.png)");
            $(".rightIcon").css("background-color", "#697dff");
            $(".center h3").css("color", "#697DFF");
            $(".real").css("color", "#505fbe");
            $(".black_star").attr("src", "__BLACK__/black_star.jpg");
            $(".black_yl").attr("src", "__BLACK__/black_yl.png");
            $(".firstTime").css("background-color", "#697dff");
            $(".secondTime").css("background-color", "#91a0ff");
            $(".black_house").attr("src","__FRONT__/img/home.png");
            $('.change_color').css('color','#697DFF');
            $('.change_bg').css('background-color','#697DFF');

        }
        function day(){
            $("#header").css("background-image", "url(__FRONT__/img/bg.png)");
            $(".rightIcon").css("background-color", "#00beff");
            $(".center h3").css("color", "#4ad1ff");
            $(".real").css("color", "#0990be");
            $(".black_star").attr("src", "__FRONT__/img/star.png");
            $(".black_yl").attr("src", "__FRONT__/img/yl.png");
            $(".firstTime").css("background-color", "#00a3da");
            $(".secondTime").css("background-color", "#4ad1ff");
            $(".black_house").attr("src","__FRONT__/img/homeday.png");
            $('.change_color').css('color','#4ad1ff');
            $('.change_bg').css('background-color','#4ad1ff');
        }
        /*切换主题*/
    });

    /*弹出规则框*/
    $("#challenge").click(function () {
        $(".fade").css("display", "block");
        $(".succ-pop").css("display", "block");
    });

    /*点击阴影层取消弹出框*/
    $(".fade").click(function () {
        $(this).css("display", "none");
        $(".succ-pop").css("display", "none");
    });

    /*切换白天黑夜效果*/
    //2 白天 1夜晚




</script>